<template>
  <div>
    <x-card v-if="hasPerm('gardenhouse:page')">
      <div
        slot="content"
        class="table-page-search-wrapper"
      >
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col
              :md="7"
              :sm="24"
            >
              <a-form-item label="搜索">
                <a-input
                  allow-clear
                  placeholder="请输入菜谱名称"
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="7"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="$refs.table.refresh(true)"
              >查询
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </x-card>
    <a-card :bordered="false">
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        bordered
      >
        <template
          slot="operator"
          v-if="hasPerm('sysclasses:add')"
        >
          <a-button
            icon="plus"
            type="primary"
            v-if="hasPerm('sysclasses:add')"
            @click="$refs.addForm.add()"
          >新增
          </a-button>
        </template>
        <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
          呜啦啦
        </p>
        <span
          slot="action"
          slot-scope="record"
        >
<!--          <a-->
          <!--            v-if="hasPerm('gardenhouse:add')"-->
          <!--          >隐藏</a>-->
          <!--          <a-divider-->
          <!--            type="vertical"-->
          <!--            v-if="hasPerm('sysclasses:edit') & hasPerm('sysclasses:delete')"-->
          <!--          />-->
          <a
            type="danger"
            v-if="hasPerm('gardenhouse:delete')"
          >修改</a>
          <a-divider
            type="vertical"
            v-if="hasPerm('sysclasses:edit') & hasPerm('sysclasses:delete')"
          />
          <a
            v-if="hasPerm('gardenhouse:delete')"
            @click="handleDelete(record.id)"
          >删除</a>
        </span>
      </s-table>
      <add-form ref="addForm" @ok="handleOk" />
      <!--      <edit-form ref="editForm" @ok="handleOk" />-->
    </a-card>
  </div>
</template>

<script>
import { cookBookStoreList, delCookBookStore } from '@/api/modular/cookBook/cookBookManage'
import { STable, XCard } from '@/components'
import addForm from '@/views/cookbook/addForm'

export default {
  components: {
    STable,
    XCard,
    addForm
  },
  data() {
    return {
      // 表头
      columns: [
        {
          title: '菜谱名称',
          dataIndex: 'recipeName'
        },
        {
          title: '简写名称',
          dataIndex: 'abbreviation'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          width: '200px'
        }
      ],
      loadData: (parameter) => {
        return cookBookStoreList(Object.assign(parameter, this.queryParam)).then((res) => {
          if (res.data.rows.length) {
            return res.data
          }
        })
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.table.refresh(true)
    },
    async handleDelete(id) {
      const { success, message } = await delCookBookStore([{ id }])
      if (success) {
        this.$refs.table.refresh(true)
        this.$message.success('删除成功：' + message)
      } else {
        this.$message.error('删除失败：' + message)
      }
    }
  }
}
</script>

<style>

</style>